<!--
 * @Author: zhang00001 774004514@qq.com
 * @Date: 2024-06-17 10:18:04
 * @LastEditors: zhang00001 774004514@qq.com
 * @LastEditTime: 2024-07-24 09:51:22
 * @FilePath: \vue-admin\src\pages\active\ActivityForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-drawer
      :title="smsId ? '编辑' : '新增'"
      placement="right"
      width="800"
   :maskClosable='false'
    :keyboard='false'
      @close="showAddDialog = false"
      v-model:open="showAddDialog"
    >
      <a-form
        ref="formRef"
        :rules="rules"
        :model="formData"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        label-position="top"
      >
        <a-form-item
          label="AccessKeyID"
          required
          name="access_key_id"
        >
          <a-input v-model:value="formData.access_key_id"></a-input>
        </a-form-item>
        <a-form-item
          label="AccessKeySecret"
          required
          name="secret_access_key"
        >
          <a-input v-model:value="formData.secret_access_key"></a-input>
        </a-form-item>
        <a-form-item
          label="短信签名"
          required
          name="sign_name"
        >
          <a-input v-model:value="formData.sign_name"></a-input>
        </a-form-item>

        <a-form-item
          label="短信模板code"
          required
          name="template_code"
        >
          <a-input v-model:value="formData.template_code"></a-input>
        </a-form-item>
        <a-form-item
          label="模板参数"
          required
          name="template_param"
        >
          <a-input v-model:value="formData.template_param"></a-input>
        </a-form-item>
        <a-form-item
          label="模板名称"
          required
          name="text_name"
        >
          <a-input v-model:value="formData.text_name"></a-input>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button @click="showAddDialog = false">取消</a-button>
          <a-button
            type="primary"
            style="margin-left: 20px"
            @click="handleSubmit"
            :loading="loading"
          >
            确认
          </a-button>
        </a-form-item>
      </a-form>

      <a-form-item></a-form-item>
    </a-drawer>
  </div>
</template>

<script setup>
  import { smsAdd, smsUpdate } from '@/api/index.js'
  import { ref, defineEmits, defineExpose, defineProps, toRefs, nextTick, reactive } from 'vue'
  import Collect from 'collect.js'
  const emits = defineEmits(['activity-added', 'close'])
  const props = defineProps({})
  const showAddDialog = ref(false)
  const formRef = ref()
  const rules = {
    access_key_id: [
      {
        required: true,
        message: '请输入AccessKeyID',
        trigger: 'change'
      },
      {
        min: 2,
        max: 50,
        message: '长度2-50字',
        trigger: 'blur'
      }
    ],
    secret_access_key: [
      {
        required: true,
        message: '请输入AccessKeySecret',
        trigger: 'change'
      }
    ],
    sign_name: [
      {
        required: true,
        message: '请输入短信签名',
        trigger: 'change'
      }
    ],
    template_code: [
      {
        required: true,
        message: '请输入短信模板code',
        trigger: 'change'
      }
    ],
    template_param: [
      {
        required: true,
        message: '请输入模板参数',
        trigger: 'blur'
      }
    ],
    text_name: [
      {
        required: true,
        message: '请输入模板名称',
        trigger: 'blur'
      }
    ]
  }

  const formData = ref({})
  const loading = ref(false)
  const uploadVisible = ref(false)
  const handleSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        let http = smsId.value ? smsUpdate : smsAdd
        let params
        if (smsId.value) {
          const collection = Collect(formData.value)

          const diff = collection.diffAssoc(dateRow.value)
          params = {
            testmsg_id: formData.value.testmsg_id,
            ...diff.all()
          }
          if (Object.values(params).length == 1) {
        message.error('暂未修改')
        return
      }
        } else {
          params = formData.value
        }
       
        loading.value = true
        http(params).then((res) => {
          if(res.errorCode){
        message.error(res.msg||'操作失败')
        return
      }
          if (res.code == 200) {
            showAddDialog.value = false
            emits('activity-added')
          }
        })
      })
      .catch((error) => {
        console.log('error', error)
      })
      .finally(() => {
        loading.value = false
      })
  }

  const dateRow = ref()
  const smsId = ref(null)
  const init = (row) => {
    showAddDialog.value = true
    nextTick(() => {
      formRef.value.resetFields()
      if (row) {
        smsId.value = row.testmsg_id
        dateRow.value = JSON.parse(JSON.stringify(row))
        formData.value = JSON.parse(JSON.stringify(row))
      } else {
        smsId.value = null
      }
    })
  }
  defineExpose({
    init
  })
</script>

<style scoped></style>
